<template>
	<view>
		<view class="banner" id="banner">
			<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221212/1103877061684fa9bcd5a46a08810295.jpg" mode="widthFix" class="b-cover"></image>
		</view>
		<view style="height: 98rpx;">
			<view class="screen" :style="tabsFixed ? 'position: fixed;top: 0;right: 0;left: 0;z-index: 20;' : ''">
				<picker class="s-list" @change="cityChange" :value="cityIndex" :range="cityArray">
					<view class="sl-value">{{cityArray[cityIndex]}}</view>
				</picker>
				<picker class="s-list" @change="typeChange" :value="typeIndex" :range="typeArray">
					<view class="sl-value">{{typeArray[typeIndex]}}</view>
				</picker>
			</view>
		</view>
		<view class="list aclear">
			<navigator v-for="item,index in listArray" :key="index" :url="item.url" hover-class="none" class="l-box">
				<view class="lb-cover">
					<image :src="item.images" mode="aspectFill" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="lb-info">
					<view class="lbi-title">{{item.title}}</view>
				</view>
			</navigator>
			<view class="l-null" v-if="listArray.length<1">
				<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221115/1d9127c255e443339c89aa67c36acc2a.png" class="ln-icon"></image>
				<view class="ln-text">暂无数据</view>
			</view>
		</view>
		<Footers></Footers>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsHeight: 0,
				tabsFixed: false,
				cityIndex: 0,
				cityArray: ['请选择城市'],
				cityData: [],
				cityName: '',
				typeIndex: 0,
				typeArray: ['请选择类型'],
				typeData: [],
				formData: {
					pageNum: 1,
					pageSize: 20,
					cityCodeAliases: '',
					caseTypeAliases: ''
				},
				listArray: [],
				pageCount: 0
			}
		},
		onLoad(option) {
			this.formData.cityCodeAliases = option.city || ''
			this.formData.caseTypeAliases = option.type || ''
			uni.createSelectorQuery().in(this).select('#banner').boundingClientRect(data => {
				this.tabsHeight = data.height
			}).exec()
		},
		onShow() {
			this.getCityFn()
			this.getTypeFn()
			this.getListFn()
			// 设置TDK
			if (uni.getSystemInfoSync().uniPlatform == 'mp-baidu') {
				swan.setPageInfo({
					title: '网站建设及seo优化部分案例-竞价托管-巨量引擎抖音代运营-纺扬网站建设',
					description: '网站建设及seo关键词优化，竞价托管，巨量引擎抖音代运营认准纺扬网站建设，多年来致力于为客户创造商业价值，您值得信赖。',
					keywords: '网站建设,seo优化,竞价托管,抖音代运营,巨量引擎代运营,纺扬网站建设'
				})
			}
		},
		onPullDownRefresh() {
			this.listArray = []
			this.formData.pageNum = 1
			this.getListFn()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.formData.pageNum >= this.pageCount) {
				uni.showModal({
					title: '温馨提示',
					content: '已经到底了还没有你喜欢的么？要不看看新闻资讯吧！',
					success(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/xwzx'
							})
						}
					}
				})
				return false
			}
			this.formData.pageNum ++
			this.getListFn()
		},
		onPageScroll(e) {
			if (!this.tabsFixed && e.scrollTop >= this.tabsHeight) {
				this.tabsFixed = true
			}
			if (this.tabsFixed && e.scrollTop <= this.tabsHeight) {
				this.tabsFixed = false
			}
		},
		methods: {
			// 获取城市
			async getCityFn() {
				let getCity = await this.u.http({
					url: this.u.queryCaseCityList,
					data: {
						pageNum: 1,
						pageSize: 50
					}
				})
				if (getCity.code == 200) {
					getCity.data.list.forEach((item, index) => {
						this.cityArray.push(item.cityName)
						if (item.cityAliases == this.formData.cityCodeAliases) {
							this.cityIndex = index + 1
							this.cityName = item.cityName
							// 设置TDK
							if (uni.getSystemInfoSync().uniPlatform == 'mp-baidu') {
								swan.setPageInfo({
									title: `${item.cityName}网站建设及seo优化部分案例-竞价托管-巨量引擎抖音代运营-纺扬网站建设`,
									description: `${item.cityName}网站建设及seo关键词优化，竞价托管，巨量引擎抖音代运营认准纺扬网站建设，（☏:191-0267-1826）多年来致力于为客户创造商业价值，您值得信赖。`,
									keywords: `${item.cityName}网站建设,${item.cityName}seo优化,${item.cityName}竞价托管,${item.cityName}抖音代运营,${item.cityName}巨量引擎代运营,${item.cityName}纺扬网站建设`
								})
							}
						}
					})
					this.cityData = getCity.data.list
				}
			},
			// 选择城市
			cityChange(e) {
				let city = e.detail.value < 1 ? '' : this.cityData[e.detail.value - 1].cityAliases
				uni.redirectTo({
					url: `/pages/khal?city=${city}`
				})
			},
			// 获取类型
			async getTypeFn() {
				let getType = await this.u.http({
					url: this.u.queryCaseTypeList,
					data: {
						pageNum: 1,
						pageSize: 50
					}
				})
				if (getType.code == 200) {
					getType.data.list.forEach((item, index) => {
						this.typeArray.push(item.typeName)
						if (item.typeAliases == this.formData.caseTypeAliases) {
							this.typeIndex = index + 1
							// 设置TDK
							if (uni.getSystemInfoSync().uniPlatform == 'mp-baidu') {
								swan.setPageInfo({
									title: item.seoTitle.replace(/{城市}/gi, this.cityName).replace(/{分页}/gi, ''),
									description: item.seoDesc.replace(/{城市}/gi, this.cityName),
									keywords: item.seoKeyword.replace(/{城市}/gi, this.cityName)
								})
							}
						}
					})
					this.typeData = getType.data.list
				}
			},
			// 选择类型
			typeChange(e) {
				let type = e.detail.value < 1 ? '' : this.typeData[e.detail.value - 1].typeAliases
				let url = `/pages/khal?type=${type}`
				if (this.formData.cityCodeAliases) {
					url = `/pages/khal?city=${this.formData.cityCodeAliases}&type=${type}`
				}
				uni.redirectTo({
					url
				})
			},
			// 获取列表
			async getListFn() {
				let getList = await this.u.http({
					url: this.u.queryCaseList,
					data: this.formData
				})
				if (getList.code == 200) {
					getList.data.list.forEach(item => {
						item.url = `/pages/khalxq?id=${item.id}`
					})
					this.listArray = [...this.listArray, ...getList.data.list]
					this.pageCount = getList.data.pages
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url("@/static/css/color.less");
	
	.screen {
		padding: 0 24rpx;
		border-bottom: 1rpx solid #e6e6e6;
		box-sizing: border-box;
		background-color: #fff;
		overflow: hidden;
		
		.s-list {
			float: left;
			width: 50%;
			height: 98rpx;
			line-height: 98rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.sl-value {
				font-size: 28rpx;
				padding-right: 26rpx;
				position: relative;
				
				&::after {
					content: '';
					width: 0;
					height: 0;
					border-width: 14rpx 8rpx 0;
					border-style: solid;
					border-color: #666 transparent transparent transparent;
					position: absolute;
					top: 50%;
					right: 0;
					transform: translateY(-50%);
				}
			}
		}
	}
	
	.list {
		padding: 24rpx 24rpx 0 0;
		
		.l-box {
			float: left;
			margin: 0 0 24rpx 24rpx;
			width: 338rpx;
			box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.09);
			
			.lb-cover {
				width: 100%;
				height: 240rpx;
			}
			
			.lb-info {
				background-color: @color-blue;
				
				.lbi-title {
					font-size: 30rpx;
					text-align: center;
					color: #fff;
					padding: 0 24rpx;
					height: 56rpx;
					line-height: 56rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
		
		.l-null {
			overflow: hidden;
			
			.ln-icon {
				width: 200rpx;
				height: 165rpx;
				margin: 50rpx auto 0;
				display: block;
			}
			
			.ln-text {
				margin-top: 20rpx;
				text-align: center;
				font-size: 24rpx;
				color: #999;
			}
		}
	}
</style>
